<template>
  <!-- 导航栏 -->
    <van-nav-bar
      title="购物车"
      left-text="返回"
      left-arrow
      fixed
      placeholder
      z-index="1000"
      @click-left="back"
    />

  <van-checkbox-group v-model="checked" @change="ToggleGroup" ref="checkboxGroup">
    <!-- 循环cart -->
    <div class="cart" v-for="(item,key) in list" :key="key">
      <van-checkbox :name="item.id"></van-checkbox>

      <!-- 滑动单元格 <van-swipe-cell>-->
      <van-swipe-cell>
        <!-- 商品卡片 -->
        <van-card
          title="商品名称"
          :thumb="item.product.thumbs_text"
        >
          <template #title>
            <div class="title">{{ item.product.name }}</div>
          </template>

          <!-- 卡片的插槽部分 -->
          <template #desc v-if="item.attrs">
            <van-tag v-for="(val,key) in item.attrs" :key="key" class="tag" type="primary">{{val.value}}</van-tag>
          </template>
          <template #desc v-else>
            <div class="TagGroup">
              <van-tag class="tag" type="danger">无规格数据</van-tag>
            </div>
          </template>
          <template #tags>
            <div class="price">单价：￥{{item.price}}</div>
          </template>

          <template #price>
            <div class="price">合计：￥{{ item.total }}</div>
          </template>

          <!-- 卡片的商品数量 stepper 步进器 -->
          <template #num>
            <!-- step="2" 设置长度 -->
            <van-stepper v-model="item.nums" :max="item.product.stock"  @click="CartEdit(item)" />
          </template>
        </van-card>

        <!-- 滑动单元格插槽  右侧滑动 -->
        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            class="delete-button"
            @click="CartDel(item)"
          />
        </template>

      </van-swipe-cell>
    </div>
  </van-checkbox-group>

  <!-- 提交动作栏 -->
  <van-submit-bar :price="total" @submit="submit" button-text="提交订单">
    <van-checkbox v-model="CheckedAll" @click="checkAll">全选</van-checkbox>
  </van-submit-bar>
</template>

<script setup>

  const {proxy} = getCurrentInstance()
  let busid = proxy.$business.value.id;
  let list = ref([])
  let Sums = ref(0)
  let checked = ref([])
  let CheckedAll = ref(false)
  const checkboxGroup = ref(null);

  onMounted(()=>{
    CartIndex()
  })
  //显示购物车列表
  const CartIndex = async ()=>{
      if(!busid){
        proxy.$fail('请先登录!');
        exit;
      }
      //发送同步请求
      var result = await proxy.$POST({
          url:'/cart/index',
          params:{busid:busid}
      })
      if(!result) return false
      if(result.code==0){
        proxy.$fail({
          message:result.msg,
          duration:1000,
          onClose:()=>proxy.$router.go(-1)
        })
      }
      list.value = result.data.cart
      //把sku规则转换成 字符串形势
      result.data.cart.map((item)=>item.attrs = JSON.parse(item.attrs))
      // Sums.value = result.data.Sums
      return false
  }
  const CartEdit = async (item)=>{
      if(item.nums<1){
        return false
      }
      if(item.product.stock<item.nums){
          return false
      }
      //发起请求
      var result = await proxy.$POST({
        url:'/cart/edit',
        params:{id:item.id,nums:item.nums}
      })
      if(!result) return false
      
      if(result.code==0){
        proxy.$fail(result.msg)
        return false
      }
      CartIndex()
  }
    //勾选复选框 改变事件
  const ToggleGroup = (names) => {
      CheckedAll.value = (names.length == list.value.length) ? true :false
  }
  const checkAll = () => {
      CheckedAll.value==true ? checkboxGroup.value.toggleAll(true) :checkboxGroup.value.toggleAll()
  }
    //计算总和 使用计算属性
  const total = computed(()=>{
    var total = 0;
    list.value.map((item)=>{
      //判断是否选中
      if(checked.value.includes(item.id)) total+=parseFloat(item.total);
    })
    return parseFloat(total*100)
  })
  //删除
  const CartDel = async (item)=>{
    //提醒
      proxy.$confirm({
        message:`是否确认删除 ${item.product.name}`
      }).then(async ()=>{
        //发送请求
        let result = await proxy.$POST({
          url:'/cart/del',
          params:{id:item.id}
        })
        if(!result) return false
        if(result.code == 0){
          proxy.$fail(result.msg)
          return false
        }
        proxy.$fail(result.msg)
        CartIndex();
      }).catch((err)=>console.log('用户取消!'))
  }

  const ProductInfo = () => proxy.$router.push('/product/info')

  //返回上一页
  const back = () => proxy.$router.push('/')

  const submit = ()=>{
    if(checked.value.length<0){
      proxy.$fail('请选择下单商品')
      return false
    }
    //跳转
    proxy.$router.push({path:'/cart/confirm',query:{cartids:checked.value.join(',')}})
  }
</script>

<style scoped>
  @import url('/assets/css/cart.css');
</style>